<template>
    <div class="study_container container">
        <search-bar :placeholder="placeholder" :pageParam="pageParamObj" :url="url" :inputPlaceholder="inputPlaceholder"></search-bar>
        <div class="img_container">
            <mt-swipe :auto="8000" v-if="bannerList.length !==0">
                <mt-swipe-item v-for="(item) in bannerList" :key="item.id" @click.native="turnToPage(item.id)">
                    <div  class="carousel">
                        <img :src="item.attachments" alt="">
                        <p> {{item.theme}}</p>
                    </div>
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <mt-navbar v-model="selected" @click.native="tabChange">
            <mt-tab-item id="01">党建微课堂 <span class="num">({{wktCount}})</span></mt-tab-item>
            <mt-tab-item id="02">优秀标杆<span class="num">({{yxbgCount}})</span></mt-tab-item>
            <mt-tab-item id="03">在线学习<span class="num">({{zxxxCount}})</span></mt-tab-item>
            <mt-tab-item id="04">学习心得<span class="num">({{xxxdCount}})</span></mt-tab-item>
        </mt-navbar>
        <div class="top_bg">
            <img src="../assets/img/u147.jpg" alt="">
        </div>
        <mt-tab-container v-model="selected">


            <mt-tab-container-item id="01">
                <div class="main-body">
                    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"
                                 :autoFill="isAutoFill">
                        <ul class="mui-table-view mui-grid-view">
                            <li v-for="item in listData" :key="item.id" @click="turnToPage(item.id)">
                                <div class="img_box">
                                    <img :src="item.attachments " alt="">
                                </div>
                                <div class="content ">
                                    <h3>{{item.theme}}</h3>
                                    <p class="detail">{{item.description }}</p>
                                    <p class="time">{{item.activityDate}}</p>
                                </div>
                            </li>
                        </ul>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>


            <mt-tab-container-item id="02">
                <div class="main-body">
                    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore1"
                                 :autoFill="isAutoFill">
                        <ul class="pole">
                            <li v-for="item in listData" :key="item.id" @click="turnToPage(item.id)">
                                <div>
                                    <img :src="item.attachments " alt="">
                                </div>
                                <div class="content ">
                                    <h3>{{item.theme}}</h3>
                                    <p class="time">{{item.activityDate}}</p>
                                    <p class="detail">{{item.description }}</p>
                                </div>
                            </li>
                        </ul>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="03">
                <div class="main-body" ref="wrapper">
                    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore2"
                                 :autoFill="isAutoFill">
                        <ul class="pole pole_study">
                            <li v-for="item in listData" :key="item.id" @click="turnToPage(item.id)">
                                <div class="content ">
                                    <h3>{{item.theme}}</h3>
                                    <p class="detail">{{item.description }}</p>
                                    <p class="time">{{item.activityDate}}</p>
                                </div>
                            </li>
                        </ul>

                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="04">
                <div class="main-body">
                    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore3"
                                 :autoFill="isAutoFill">
                        <ul class="mui-table-view mui-grid-view">
                            <li v-for="item in listData" :key="item.id" @click="turnToPage(item.id)">
                                <div class="img_box">
                                    <img :src="item.attachments " alt="">
                                </div>
                                <div class="content ">
                                    <h3>{{item.theme}}</h3>
                                    <p class="detail">{{item.description }}</p>
                                    <p class="time">{{item.activityDate}}</p>
                                </div>
                            </li>
                        </ul>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>

<script>
    import searchBar from '@/components/searchBar'
    import BASE_URL from '@/api/url'
    import {pullDown} from './common/mixin'

    export default {
        name: "study",
        components: {searchBar},
        mixins: [pullDown],
        data() {
            return {
                selected: '01',
                placeholder: '党建学习',
                inputPlaceholder:'搜索学习名称',
                url: '/weixin/study/list',
                pageParam: {
                    type: '01',
                    page: 1,
                    size: 10,
                    theme: ''
                },
                pageParamObj: {
                    type: '01',
                    page: 1,
                    size: 10,
                    theme: '',
                    isSearch:'Y'
                },
                listData: [],
                bannerList:[],
                //可以进行上拉
                allLoaded: false,
                wrapperHeight: 0,
                totalNum: null,
                //是否自动触发上拉函数
                isAutoFill: false,
                wktCount: null,
                xxxdCount: null,
                yxbgCount: null,
                zxxxCount: null,
                pageType: 'study'
            }
        },
        activated(){
            this.$get('/weixin/study/getCount').then(data => {
                this.wktCount = data.data.wktCount;
                this.xxxdCount = data.data.xxxdCount;
                this.yxbgCount = data.data.yxbgCount;
                this.zxxxCount = data.data.zxxxCount;

            });
            this.getBanner();
            this.fetchData()
        },
        created() {
            document.title = '党建学习';
            this.$get('/weixin/study/getCount').then(data => {
                this.wktCount = data.data.wktCount;
                this.xxxdCount = data.data.xxxdCount;
                this.yxbgCount = data.data.yxbgCount;
                this.zxxxCount = data.data.zxxxCount;

            });
            this.getBanner();
            this.fetchData()
        },
        methods: {
            fetchData() {
                this.$get('/weixin/study/list', this.pageParam).then(data => {
                    if (!(data.data.totalNum > data.data.currentPage * data.data.pageSize)) {
                        this.allLoaded = true; // 若数据已全部获取完毕
                    }
                    this.listData = data.data.items.map((item) => {
                        return {
                            activityDate: item.activityDate,
                            attachments: `${BASE_URL}/${item.attachments}`,
                            browseCount: item.browseCount,
                            id: item.id,
                            theme: item.theme,
                            description: item.description,
                            praiseCount: item.praiseCount
                        }
                    });
                })
            },
        }
    }
</script>

<style scoped lang="less">
    .main-body .pole {
        padding: 0 0.3rem 0 0.3rem;
        li:nth-child(1) {
            padding-top: 0;
        }
        li {
            padding: 0.3rem 0;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
        }
        img {
            width: 100%;
            height: 3.65rem;

        }
        .title {
            margin-top: 0;
        }
        h3 {
            margin-top: 0.36rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
        }
        .detail {
            margin-top: 0.3rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;

        }
        .time {
            margin-top: 0.18rem;
        }
    }

    .pole_study {
        h3{
            margin-top: 0!important;
        }

    }
</style>